from nicegui import ui


def submit_form():
    data = {
        "测试点位名称": location_input.value,
        "基站名称": station_input.value,
        "是否天面": is_rooftop.value,
        "图片": "已上传" if upload_button._props.get("value") else "未上传",
    }
    ui.notify("表单提交成功！")
    print("收集的数据:", data)


# 设置页面背景和整体样式
ui.add_head_html(
    """
<style>
    body {
        background-color: #ffebee; /* 浅粉色背景 */
        background-image: 
            linear-gradient(45deg, #ffcdd2 25%, transparent 25%),
            linear-gradient(-45deg, #ffcdd2 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #ffcdd2 75%),
            linear-gradient(-45deg, transparent 75%, #ffcdd2 75%);
        background-size: 20px 20px;
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }
    .form-container {
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        margin: 20px auto;
        max-width: 800px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .form-title {
        text-align: center;
        margin-bottom: 20px;
    }
    .form-row {
        margin-bottom: 15px;
    }
    .upload-area {
        border: 2px dashed #ccc;
        padding: 20px;
        text-align: center;
        border-radius: 5px;
        margin-bottom: 15px;
        cursor: pointer;
    }
</style>
"""
)

with ui.column().classes("form-container"):
    # 表单标题
    with ui.column().classes("form-title"):
        ui.label("4G基站测试记录收集表单").style("font-size: 24px; font-weight: bold")
        ui.label("4G基站测试记录收集表单，需要认真填写。").style("color: #666")

    # 测试点位名称
    with ui.row().classes("form-row"):
        ui.label("测试点位名称").style("width: 150px")
        location_input = ui.input(placeholder="请输入测试点位名称").style(
            "flex-grow: 1"
        )

    # 图片上传区域
    with ui.column().classes("form-row"):
        ui.label("图片题").style("width: 150px")
        with ui.column().classes("upload-area"):
            ui.label("添加图片或拖拽上传").style("color: #888")
            upload_button = ui.upload(label="选择图片", auto_upload=True).style(
                "margin-top: 10px"
            )

    # 基站名称
    with ui.row().classes("form-row"):
        ui.label("基站名称").style("width: 150px")
        station_input = ui.input(placeholder="请输入基站名称").style("flex-grow: 1")

    # 是否天面
    with ui.row().classes("form-row"):
        ui.label("是否天面").style("width: 150px")
        is_rooftop = ui.toggle([False, True], value=False).style("flex-grow: 1")

    # 提交按钮
    ui.button("提交", on_click=submit_form).style("margin-top: 20px; width: 100%")


# 启动服务
if __name__ in {"__main__", "__mp_main__"}:
    ui.run(port=80, title="NiceGUI Weekly Report")
